<!-- 报名审核 -->
<template>
  <div class="audit">
    <el-button type="primary" class="signBtn" @click="getItem"
      ><i class="el-icon-user"></i> 审核</el-button
    >
    <el-table
      :data="tableData.items"
      ref="multipleTable"
      tooltip-effect="dark"
      height="400"
      class="el-table"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="num" label="序号" width="100" type="index">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="200"> </el-table-column>
      <el-table-column prop="object" label="类别" width="180">
      </el-table-column>
      <el-table-column prop="faceObj" label="面向对象" width="180">
      </el-table-column>
      <el-table-column prop="note" label="备注" width="400"> </el-table-column>
      <el-table-column prop="signTime" label="报名时间" width="280">
      </el-table-column>
      <el-table-column prop="total" label="统计"> </el-table-column>
    </el-table>
    <div :class="['sign-item', { show: clickShow }]">
      <div class="t-head">
        <div>身份证号</div>
        <div>姓名</div>
        <div>状态</div>
        <div>操作</div>
      </div>
      <div class="stu-items">
        <div
          class="stu-item"
          v-for="(item, index) in userItemList"
          :key="index"
        >
          <div class="user-id">{{ item.userid }}</div>
          <div class="user-name">{{ item.username }}</div>
          <div class="state">{{item.userstatus}}</div>
          <div class="operation" @click="watchSign(item)">
            <span>查看本信息</span> | <span>审核</span>
          </div>
        </div>
      </div>
    </div>
    <div :class="['textInfos', { hidden: isHidden }]">
      <p class="title-p">
        填写前请确认报考科目信息，标*号的为必填项，图片上传要结合格式要求：
      </p>
      <div class="textInfos-name">
        *名称: <input type="text" placeholder="自动带出" v-model="textInfosName" />
      </div>
      <div class="textInfos-type">
        *类别: <input type="text" placeholder="自动带出" v-model="textInfosType" />
      </div>
      <div class="textInfos-time">
        *报名时间:
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </div>
      <div class="textInfos-username">*姓名: <input type="text"  v-model="username"/></div>
      <div class="textInfos-idcard">*身份证号: <input type="text" v-model="userid"/></div>
      <div class="textInfos-sex">
        性别: <input type="text" placeholder="自动带出" v-model="usersex"/>
      </div>
      <div class="textInfos-result">
        审核结果:
        <select name="" id="" v-model="selectValues">
          <option value="审核通过">审核通过</option>
          <option value="审核不通过">审核不通过</option>
        </select>
      </div>
      <div class="textInfos-btn">
        <el-button type="primary" @click="confirmInfo">提交</el-button>
        <el-button type="danger" @click="closeInfo">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // 弹出审核群体信息框状态
      clickShow: true,
      // 弹出审核个人信息框状态
      isHidden: true,
      tableData: [],
      multipleSelection: [],
      userItemList: [],
      value1: "2020-9-2 08:00",
      value2: "2020-9-2 18:00",
      // msg1:"待审核",
      // msg2:"审核通过",
      userid:'',
      username:'',
      usersex:'',
      textInfosName:"普通话等级考试",
      textInfosType:"二级",
      selectValues:'',
      userstatus:'',
      obj:{}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getItem: async function () {
      this.clickShow = !this.clickShow;
      let res = await this.$http.get("/getStuInfo", {});
      // console.log(res);
      this.userItemList = res.userItem;
      // console.log(this.userItemList);
      // console.log(this.clickShow);
    },
    watchSign: function (item) {
      this.isHidden = false;
      // console.log(item);
      this.userid = item.userid;
      this.username = item.username;
      // this.userstatus = item.userstatus;
      this.obj=item
      if(item.usersex === false){
        this.usersex = "男"
      } else {
        this.usersex = "女"
      } 
    },
    closeInfo: function () {
      this.isHidden = true;
    },
    confirmInfo:function () {
      this.isHidden = true;
      if(this.selectValues === '审核通过'){
        this.obj.userstatus= '审核通过'
      } else {
        this.obj.userstatus= '审核不通过'
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$http.get("/getTextSignInfo", {}).then((res) => {
      // console.log(res);
      this.tableData = res;
      // console.log(this.tableData);
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.audit {
  position: relative;
  .signBtn {
    margin: 20px 50px 20px 0;
    position: relative;
    float: right;
    padding: 0px;
    width: 100px;
    height: 40px;
    text-align: right;
    padding-right: 22px;
    color: #000;
    img {
      width: 30px;
      height: 30px;
      position: absolute;
      left: 17px;
      top: 4px;
    }
  }
  .t-head {
    width: 70%;
    display: flex;
    margin: 10px auto;
    background-color: rgb(250, 250, 250);
    border: 1px solid #666;
    border-radius: 3px;
    height: 34px;
    line-height: 34px;
    div {
      width: 25%;
      text-align: center;
    }
  }
  .show {
    display: none;
  }
  .stu-items {
    overflow-y: auto;
    height: 280px;
    .stu-item {
      width: 70%;
      margin: 0 auto;
      display: flex;
      border-bottom: 1px solid #999;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      .user-id {
        width: 25%;
        text-align: center;
      }

      .user-name {
        width: 25%;
        text-align: center;
      }

      .state {
        width: 25%;
        text-align: center;
      }

      .operation {
        width: 25%;
        text-align: center;
        span {
          color: #1890ff;
          cursor: pointer;
        }
      }
    }
  }
  .hidden {
    display: none;
  }
  .textInfos {
    position: absolute;
    left: 430px;
    top: 100px;
    width: 618px;
    height: 578px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 5px;
    z-index: 10;
    padding-top: 15px;
    .title-p {
      border-bottom: 1px solid #000;
    }

    .textInfos-name {
      font-size: 18px;
      //   margin-left: 100px;
      margin: 15px 0px 0px 100px;
      input {
        outline: none;
        width: 300px;
        height: 36px;
        padding: 3px 2px 3px 2px;
        font-size: 18px;
      }
    }

    .textInfos-type {
      font-size: 18px;
      margin: 15px 0px 15px 100px;
      input {
        outline: none;
        width: 300px;
        height: 36px;
        padding: 3px 2px 3px 2px;
        font-size: 18px;
      }
    }

    .textInfos-time {
      font-size: 18px;
      margin-left: 30px;
    }

    .textInfos-username {
      font-size: 18px;
      margin: 15px 0px 15px 30px;
      input {
        outline: none;
        width: 300px;
        height: 36px;
        padding: 3px 2px 3px 2px;
        font-size: 18px;
        margin-left: 40px;
      }
    }

    .textInfos-idcard {
      font-size: 18px;
      margin: 15px 0px 15px 30px;
      input {
        outline: none;
        width: 300px;
        height: 36px;
        padding: 3px 2px 3px 2px;
        font-size: 18px;
        margin-left: 5px;
      }
    }

    .textInfos-sex {
      font-size: 18px;
      margin: 15px 0px 15px 30px;
      input {
        outline: none;
        width: 300px;
        height: 36px;
        padding: 3px 2px 3px 2px;
        font-size: 18px;
        margin-left: 50px;
      }
    }

    .textInfos-result {
      font-size: 18px;
      margin: 15px 0px 15px 30px;
      select {
        width: 155px;
        height: 23px;
        padding: 3px 2px 3px 2px;
        margin-left: 15px;
      }
    }

    .textInfos-btn {
      margin: 60px 0px 0px 230px;
    }
    img {
      width: 127px;
      height: 123px;
      position: absolute;
      right: 20px;
      bottom: 250px;
    }
    .photo-p {
      display: block;
      position: absolute;
      width: 172px;
      right: 0px;
      bottom: 140px;
      color: red;
    }
  }
}
</style>